<template>
  <div class="x-app-course" @click="nav2CourseCatalogue">
    <div class="x-app-course-cover">
      <span class="x-app-course-cover-tag">{{ data.scheduleCount }}节</span>
      <img class="w-100 h-100" :src="data.coverUrl" />
      <span class="x-app-course-cover-time" v-if="showTrainEndTime">{{ $moment(data.endTime).format('YYYY-MM-DD') }}</span>
    </div>
    <div class="x-app-course-info">
      <div class="x-app-course-info-top">
        <span><x-svg-icon name="my" />{{ data.lecturerName }}</span>
        {{ data.name }}
      </div>
      <div class="x-app-course-info-bottom">
        {{ data.learningCount || 0 }}人学习过 / {{ data.commentCount || 0 }}条评论
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppCourse',
  props: {
    data: {
      type: Object,
      default: () => { return {} }
    },
    showTrainEndTime: { // 培训截止时间显示
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
    };
  },
  methods: {
    nav2CourseCatalogue () {
      this.$router.push({
        name: 'courseCatalogue',
        query: { id: this.data.id },
      })
    },
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
@import "@/css/variable.scss";
.x-app-course {
  display: flex;
  margin-top: 22px;
  &:first-child {
    margin-top: 0;
  }
  .x-app-course-cover {
    width: 131px;
    height: 74px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    .x-app-course-cover-tag {
      background: $blue6;
      border-radius: 6px;
      position: absolute;
      top: 4px;
      left: 7px;
      font-size: 8px;
      padding: 2px 5px;
      color: $white1;
    }
    .x-app-course-cover-time {
      font-size: 10px;
      color: $white1;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 17px;
      line-height: 17px;
      text-align: center;
      background-color: $black9;
    }
  }
  .x-app-course-info {
    flex: 1;
    margin-left: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .x-app-course-info-top {
      font-size: 0.0933rem;
      font-weight: 500;
      color: $white5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        display: inline-block;
        padding: 3px 6px;
        color: $blue6;
        background-color: $blue7;
      }
    }
    .x-app-course-info-bottom {
      font-size: 12px;
      color: $white4;
    }
  }
}
</style>
